<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="ScratchMaker">
  <meta name="author" content="">
  <title>ScratchMaker</title>

  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/style.css" rel="stylesheet">

  <script src="/static/js/jquery-3.5.0.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function () {

      $("#submittime").click(function (e) {
        $.post("/generator", { 
          "startTime": $("input[id='startTime']").val(),
          "stopTime": $("input[id='stopTime']").val()
          })
          .done(function (string) {
            if(string!='')
              alert(string)
          });
      });

    });

    function refreshTime(){
      $.post("/refresh", { 
          })
          .done(function (e) {
            console.log(e)
            let message_json = JSON.parse(e)
            $("input[id='startTime']").val(message_json.startTime);
            $("input[id='stopTime']").val(message_json.stopTime);
          });
    }

  </script>
</head>

<body onload="refreshTime()">
  <nav id="menu" class="" style="background-color: #011F29;">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a class="navbar-brand" href="https://scratchmaker.cn"><i class="fa fa-home"></i>
          ScratchMaker<strong></strong></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->

      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <div id="main-content">
    <article>
      <div class="container">
        <div class="col-md-8 wow fadeInRight">
          <h1 class="text-center">Set Up</h1>
          <br/>
          <form id="ff" name="form1" method="post">
            <div class="row">
              <div class="col-md-6 text-right">
                Start Time
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <input type="time" class="form-control input-lg" id="startTime" placeholder="ss"
                    required="required" />
                </div>
              </div>

              <div class="col-md-6 text-right">
                Stop Time
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <input type="time" class="form-control input-lg"  id="stopTime" placeholder="Enter email"
                    required="required" />
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 text-center">
                <div class="form-group">
                </div>
                <button type="submit" class="btn btn-default btn-lg page-scroll wow fadeInUp"
                  id="submittime">Submit</button>
              </div>
            </div>

          </form>
        </div>
      </div>
    </article>
  </div>

</body>

</html>